﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/layui/css/layui.css" rel="stylesheet" />
<body>
    <div class="layui-container">
        <div class="layui-card">
            <div class="layui-card-header">
                <h2>权限管理</h2>
            </div>
            <div class="layui-card-body">
                @if (TempData["SuccessMessage"] != null)
                {
                    <div class="layui-bg-green" style="padding: 10px; margin-bottom: 10px;">
                        @TempData["SuccessMessage"]
                    </div>
                }
                @if (TempData["ErrorMessage"] != null)
                {
                    <div class="layui-bg-red" style="padding: 10px; margin-bottom: 10px;">
                        @TempData["ErrorMessage"]
                    </div>
                }
                <div class="layui-btn-group">
                    <button class="layui-btn" id="btnAdd">添加权限</button>
                </div>
                <table id="permissionTable" lay-filter="permissionTable"></table>
            </div>
        </div>
    </div>

    <!-- 添加/编辑表单 -->
    <div id="formDialog" style="display: none; padding: 20px;">
        <form class="layui-form" lay-filter="permissionForm" id="permissionForm" method="post">
            <div class="layui-form-item" id="idFormItem">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-block">
                    <input type="text" name="Id_display" id="permissionIdDisplay" readonly class="layui-input">
                </div>
            </div>
            <!-- 使用隐藏字段存储ID，确保值正确传递 -->
            <input type="hidden" name="Id" id="permissionId" value="0">
            
            <div class="layui-form-item">
                <label class="layui-form-label">权限名称</label>
                <div class="layui-input-block">
                    <input type="text" name="PermissionName" required lay-verify="required" placeholder="请输入权限名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="savePermission">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <div id="debug-info" style="margin-top: 15px; padding: 10px; background: #f2f2f2; display: none;">
            <div><strong>调试信息：</strong></div>
            <div id="form-data-debug"></div>
            <div><strong>表单当前值：</strong></div>
            <div id="form-values"></div>
            
            <!-- 直接GET方式提交测试表单 -->
            <div style="margin-top: 15px; border-top: 1px solid #ddd; padding-top: 10px;">
                <form id="testIdForm" action="/Permission/GetPermissionById" method="get" target="_blank">
                    <input type="hidden" name="id" id="testIdInput" value="0">
                    <button type="submit" class="layui-btn layui-btn-primary">测试获取ID</button>
                </form>
            </div>
        </div>
    </div>
</body>
<script src="~/layui/layui.js"></script>
<script>
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        
        var DEBUG_MODE = true;
        
        // 表格初始化
        table.render({
            elem: '#permissionTable',
            url: '/Permission/GetPermission',
            cols: [[
                { field: 'id', title: 'ID', width: 80, sort: true, templet: function(d) { 
                    // 处理响应中的大小写差异
                    return d.id || d.Id || ''; 
                }},
                { field: 'permissionName', title: '权限名称', width: 220, templet: function(d) { 
                    // 处理响应中的大小写差异
                    return d.permissionName || d.PermissionName || '';
                }},
                { 
                    title: '操作', width: 160, templet: function (d) {
                        // 在操作按钮中保存行数据ID
                        var itemId = d.Id !== undefined ? d.Id : (d.id !== undefined ? d.id : 0);
                        console.log("操作列获取ID:", itemId, "行数据:", d);
                        return '<a class="layui-btn layui-btn-xs" lay-event="edit" data-id="' + itemId + '">编辑</a>' + 
                               '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-id="' + itemId + '">删除</a>';
                    }
                }
            ]],
            parseData: function(res) {
                console.log("表格数据解析:", res);
                return {
                    "code": res.code, 
                    "msg": res.msg, 
                    "count": res.count,
                    "data": res.data
                };
            },
            page: true
        });
        
        // 监听表格工具条事件
        table.on('tool(permissionTable)', function (obj) {
            var data = obj.data;
            console.log("行数据:", data); // 显示行数据
            
            // 从按钮上获取ID
            var btnId = $(this).data('id');
            console.log("按钮上的ID:", btnId);
            
            // 统一获取ID，支持多种来源
            var itemId = null;
            
            // 优先从按钮data-id属性获取
            if (btnId !== undefined && btnId > 0) {
                itemId = btnId;
                console.log("使用按钮data-id属性的ID:", itemId);
            } 
            // 次优先从行数据的Id属性获取
            else if (data.Id !== undefined && data.Id > 0) {
                itemId = data.Id;
                console.log("使用行数据Id属性的ID:", itemId);
            } 
            // 最后尝试从行数据的id属性获取
            else if (data.id !== undefined && data.id > 0) {
                itemId = data.id;
                console.log("使用行数据id属性的ID:", itemId);
            }
            
            console.log("最终获取到的ID:", itemId);
            
            if (itemId === null || itemId <= 0) {
                console.error("无法获取有效的权限ID");
                layer.msg('无法获取有效的权限ID');
                return;
            }
            
            if (obj.event === 'edit') {
                // 跳转到编辑页面
                window.location.href = '/Permission/EditPermission?id=' + itemId;
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除此权限吗？', function (index) {
                    deletePermission(itemId);
                    layer.close(index);
                });
            }
        });
        
        // 添加按钮点击事件
        $('#btnAdd').on('click', function () {
            // 跳转到添加页面
            window.location.href = '/Permission/EditPermission';
        });
        
        // 打开编辑表单
        function openEditForm(data) {
            var title = data ? '编辑权限' : '添加权限';
            
            // 输出接收到的数据，便于调试
            if (data) {
                console.log("编辑表单收到的数据:", data);
                console.log("ID字段值检查 - 原始data.id:", data.id, "原始data.Id:", data.Id);
            }
            
            var formData = {};
            if (data) {
                // 清理表单，确保没有残留的隐藏字段
                $('#permissionForm').find('input[type="hidden"][name^="Id"]').not('#permissionId').remove();
                
                // 确保ID是数字并且大于0
                var permId = 0;
                
                // 优先使用Entity框架返回的Id(大写)，如果没有则尝试使用小写id
                if (data.Id !== undefined && data.Id !== null) {
                    permId = parseInt(data.Id);
                    console.log("使用大写Id:", permId);
                } else if (data.id !== undefined && data.id !== null) {
                    permId = parseInt(data.id);
                    console.log("使用小写id:", permId);
                }
                
                console.log("解析后的权限ID:", permId, "类型:", typeof permId);
                
                if (isNaN(permId) || permId <= 0) {
                    layer.msg('无效的权限ID，无法编辑！');
                    console.error("无效的权限ID:", data);
                    return;
                }
                
                // 使用完全匹配模型属性名的字段
                formData = {
                    "Id": permId,
                    "Id_display": permId,
                    "PermissionName": data.PermissionName || data.permissionName || ''
                };
                
                // 让调试信息框显示ID
                $('#idFormItem').show();
                
                console.log("编辑模式 - 设置的表单数据:", formData);
            } else {
                formData = {
                    "Id": 0,
                    "Id_display": 0,
                    "PermissionName": ''
                };
                
                // 隐藏ID字段，因为是新建
                $('#idFormItem').hide();
                
                console.log("新增模式 - 设置的表单数据:", formData);
            }
            
            console.log("表单填充前数据:", formData);
            form.val('permissionForm', formData);
            
            layer.open({
                type: 1,
                title: title,
                content: $('#formDialog'),
                area: ['500px', '350px'],
                success: function () {
                    // 检查表单内Id字段的实际值
                    var formId = $('#permissionId').val();
                    console.log("表单中的实际Id值:", formId);
                    
                    if (DEBUG_MODE) {
                        $('#form-data-debug').html(
                            "<p>表单ID值: " + formId + "</p>" +
                            "<p>数据: " + JSON.stringify(formData) + "</p>"
                        );
                        $('#debug-info').show();
                        
                        // 监控ID字段值变化
                        $('#permissionId').on('change', function() {
                            updateDebugInfo();
                        });
                        
                        // 初始显示所有字段值
                        updateDebugInfo();
                    }
                    
                    form.render();
                }
            });
            
            // 更新调试信息
            function updateDebugInfo() {
                if (!DEBUG_MODE) return;
                
                var currentValues = {
                    Id: $('#permissionId').val(),
                    Id_display: $('#permissionIdDisplay').val(),
                    PermissionName: $('input[name="PermissionName"]').val()
                };
                
                $('#form-values').html(
                    "<p>当前ID值: " + currentValues.Id + " (类型: " + typeof currentValues.Id + ")</p>" +
                    "<p>当前显示ID值: " + currentValues.Id_display + "</p>" +
                    "<p>当前名称值: " + currentValues.PermissionName + "</p>"
                );
                
                console.log("表单字段当前值:", currentValues);
            }
        }
        
        // 监听表单提交
        form.on('submit(savePermission)', function (data) {
            var formData = data.field;
            console.log("提交表单数据:", formData); // 调试信息
            
            // 获取ID和权限名称
            var id = parseInt(formData.Id);
            var permissionName = formData.PermissionName;
            
            console.log("解析的ID值:", id, "权限名称:", permissionName);
            
            var isNew = id === 0;
            
            // 权限名称不能为空
            if (!permissionName || permissionName.trim() === '') {
                layer.msg('权限名称不能为空');
                return false;
            }
            
            // 检查ID是否存在且是否为有效值
            if (!isNew && (isNaN(id) || id <= 0)) {
                layer.msg('无效的权限ID，无法保存');
                console.error("保存时ID无效:", formData.Id);
                return false;
            }

            // 放弃表单提交，直接使用AJAX
            if (isNew) {
                // 新建权限 - 确保参数名与控制器参数名完全一致
                $.ajax({
                    url: '/Permission/CreatePermission',
                    type: 'POST',
                    contentType: 'application/x-www-form-urlencoded',
                    data: { permissionName: permissionName },
                    success: function(res) {
                        console.log("添加权限响应:", res);
                        if (res && res.success) {
                            layer.closeAll();
                            layer.msg('添加成功');
                            table.reload('permissionTable');
                        } else {
                            layer.msg(res && res.message ? res.message : '添加失败，原因未知');
                        }
                    },
                    error: function(xhr) {
                        console.error("添加失败:", xhr.responseText);
                        layer.msg('添加失败，请重试');
                    }
                });
            } else {
                // 编辑权限 - 在URL中直接传递ID参数，确保参数名与控制器参数名完全一致
                $.ajax({
                    url: '/Permission/UpdatePermission',
                    type: 'POST',
                    contentType: 'application/x-www-form-urlencoded',
                    data: { 
                        id: id,
                        permissionName: permissionName 
                    },
                    success: function(res) {
                        console.log("更新权限响应:", res);
                        if (res && res.success) {
                            layer.closeAll();
                            layer.msg('更新成功');
                            table.reload('permissionTable');
                        } else {
                            layer.msg(res && res.message ? res.message : '更新失败，原因未知');
                        }
                    },
                    error: function(xhr) {
                        console.error("更新失败:", xhr.responseText);
                        layer.msg('更新失败，请重试');
                    }
                });
            }
            
            return false; // 阻止表单默认提交
        });
        
        // 删除权限
        function deletePermission(id) {
            $.ajax({
                url: '/Permission/DelPermission',
                type: 'POST',
                data: { id: id },
                success: function (res) {
                    if (res.success) {
                        layer.msg('删除成功');
                        table.reload('permissionTable');
                    } else {
                        layer.msg('删除失败: ' + res.message);
                    }
                },
                error: function () {
                    layer.msg('操作失败，请重试');
                }
            });
        }
    });
</script>
